<template>
  <div class="user">
    <div class="ris1">
      <!-- <div class="ri">会员</div>
      <div class="ri">帮助</div>
      <div class="ri">我的</div> -->
      <div class="ri">&emsp;&emsp;</div>
      <div class="ri">&emsp;&emsp;</div>
      <div class="ri">&emsp;&emsp;</div>
      <!-- <div class="ri" style="cursor: pointer" @click="touser()">我的</div> -->
      <!-- <div class="ri">
        <el-dropdown @command="handleCommand" trigger="click">
          <span class="el-dropdown-link" style="cursor: pointer">
            <span
              style="
                font-size: 18px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #333333;
              "
              >欢迎
            </span>
            <span style="padding-left: 12px; font-size: 16px">
              {{ yhm.yhm }}
            </span>
            <i
              class="el-icon-arrow-down el-icon--right"
              style="font-size: 14px"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click="tologin()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div> -->
    </div>
    <div class="ris2" v-if="showLogin">
      <div class="login">登录</div>
      <el-form ref="form" :model="formLogin">
        <el-form-item>
          <div class="i1" :class="activet == 0 ? 'i1' : 'i2'">
            <el-input
              v-model="formLogin.name"
              placeholder="请输入账号"
              @blur="handleBlur"
              @focus="handleFocus"
            >
              <i
                slot="prefix"
                class="el-input__icon el-icon-user"
                style="font-size: 20px"
                v-if="activet == 0"
              ></i>
              <i
                slot="prefix"
                class="el-input__icon el-icon-user"
                style="font-size: 20px; color: #333333"
                v-else
              ></i>
            </el-input>
            <div class="zh">账号</div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="i1" :class="activet1 == 0 ? 'i1' : 'i2'">
            <el-input
              v-model="formLogin.padd"
              placeholder="请输入密码"
              @blur="handleBlur1"
              @focus="handleFocus1"
            >
              <i
                slot="prefix"
                class="el-input__icon el-icon-lock"
                style="font-size: 20px"
                v-if="activet1 == 0"
              ></i>
              <i
                slot="prefix"
                class="el-input__icon el-icon-lock"
                style="font-size: 20px; color: #333333"
                v-else
              ></i>
            </el-input>
            <div class="zh">密码</div>
          </div>
        </el-form-item>
      </el-form>
      <div class="submit">登录</div>
      <div class="fts">
        <div class="fts1">立即注册</div>
        <div class="fts2">忘记密码</div>
      </div>
    </div>
  </div>
</template>
<style scoped  lang="scss">
::v-deep .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #f3ebeb;
    color: #911F23;
}
::v-deep .el-date-editor .el-range__icon {
  display: none !important;
}
::v-deep .el-date-editor .el-range__close-icon {
  display: none;
}
::v-deep .el-input__inner {
  border: 0px;
}
::v-deep .el-input {
  display: flex;
  justify-content: center;
  color: #333333;
}
::v-deep .el-input--prefix .el-input__inner {
  width: 305px;
  border: 0px;
}
//搜索框
::v-deep .el-input-group > .el-input__inner {
  height: 56px;
  border: 0px;
}
::v-deep .el-input-group__append {
  border: none !important;
  background-color: #fff;
  padding: 0 45px 0 10px;
}
::v-deep .el-input-group__append img {
  width: 32px;
  height: 32px;
  padding-top: 12px;
  cursor: pointer;
}
::v-deep .el-button--primary {
  background-color: #911f23;
  border-color: #911f23;
  border-radius: 8px;
  height: 56px;
  width: 112px;
  margin-left: 16px;
}
::v-deep .el-form--inline .el-form-item {
  margin-right: 0;
}
::v-deep .el-divider--vertical {
  height: 40px;
  background-color: #999999;
}
::v-deep .el-dropdown-menu {
  width: 130px;
}
.ris1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  width: 362px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #3d3d3d;
  margin-top: 0px;
}
.ri1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 68px;
  height: 38px;
  background: #911f23;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  color: #fff;
  cursor: pointer;
}
.ris2 {
  position: absolute;
  top: 104px;
  width: calc(362px - 48px);
  height: 290px;
  background: #ffffff;
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  z-index: 20;
  padding: 24px;
  .login {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    padding-bottom: 24px;
  }
  .i1 {
    position: relative;
    width: 100%;
    height: 46px;
    background: url("../../assets/images/inputs.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .zh {
      position: absolute;
      top: -20px;
      left: 30px;
      font-size: 12px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #999999;
    }
  }
  .i2 {
    position: relative;
    width: 100%;
    height: 46px;
    background: url("../../assets/images/inputs1.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .zh {
      position: absolute;
      top: -20px;
      left: 30px;
      font-size: 12px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }
  }
  .submit {
    width: 100%;
    height: 46px;
    background: #911f23;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
  .fts {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    .fts1 {
      color: #911f23;
      cursor: pointer;
    }
    .fts2 {
      color: #cccccc;
      cursor: pointer;
    }
  }
}
</style>

<script>
 import { gettuichu  } from "@/api/api.js";
export default {
  data() {
    return {
      showLogin: false,
      actives: 0,
      formLogin: {
        name: "",
        padd: "",
      },

      activet: 0,
      activet1: 0,
      formInline: {
        user: "",
      },
      yhm:{}
    };
  },
  created() {
    this.yhm = JSON.parse(sessionStorage.getItem("loginInfo"))?JSON.parse(sessionStorage.getItem("loginInfo")):""
  },
  mounted() {},
  methods: {
    touser(){
      const {href} = this.$router.resolve({ path: "/sc", query: {} });
      window.open(href, '_blank');
    },
    async handleCommand(command) {
      let res = await gettuichu()
      sessionStorage.removeItem("loginInfo")
      this.$router.push("/");
    },
    logins() {
      this.showLogin = !this.showLogin;
    },
    handleBlur() {
      this.activet = 0;
    },
    handleFocus() {
      this.activet = 1;
    },
    handleBlur1() {
      this.activet1 = 0;
    },
    handleFocus1() {
      this.activet1 = 1;
    },
  },
  computed: {},
  components: {},
};
</script>
